import React, { Component, PropTypes } from 'react';
import { Text, View, StyleSheet, Image, TouchableOpacity } from 'react-native';
import PxToDp from '../../utils/PxToDp';

class NavCon extends Component {
  static propTypes = {
    backName: PropTypes.string,
    currentTitle: PropTypes.string,
    onPress: PropTypes.func,
    titleColor: PropTypes.string,
    bgColor: PropTypes.string,
    align: PropTypes.string,
  };
  render() {
    const icon = this.props.titleColor === 'white' ? require('../../img/go_back_white.png') : require('../../img/go_back.png');
    const currentTitleColor = this.props.titleColor === 'white' ? '#fff' : '#121212';
    const backNameColor = this.props.titleColor === 'white' ? '#fff' : '#707175';
    const align = this.props.align === 'right' ? 'flex-end' : 'center';
    return (
      <View style={[style.wrapper, { backgroundColor: this.props.bgColor }]}>
        <TouchableOpacity
          activeOpacity={0.75}
          style={[style.backTap, style.flex]}
          onPress={() => this.props.onPress()}
        >
          <Image style={style.backIcon} source={icon} />
          <Text style={[style.backName, { color: backNameColor }]}>{this.props.backName}</Text>
        </TouchableOpacity>
        <View style={[style.currentTitle, { alignItems: align }]}>
          <Text
            style={[style.pageName, { color: currentTitleColor }]}
          >
            {this.props.currentTitle}
          </Text>
        </View>
        {this.props.children}
        <View style={[style.flex]} />
      </View>
    );
  }
}

const style = StyleSheet.create({
  wrapper: {
    alignItems: 'center',
    flexDirection: 'row',
    height: PxToDp(44),
  },
  flex: {
    flex: 1,
  },
  currentTitle: {
    flex: 3,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backName: {
    fontSize: PxToDp(18),
  },
  backTap: {
    height: PxToDp(44),
    alignItems: 'center',
    paddingLeft: PxToDp(16),
    flexDirection: 'row',
  },
  backIcon: {
    width: PxToDp(20),
    height: PxToDp(24),
  },
  pageName: {
    fontSize: PxToDp(18),
  },
});
export default NavCon;
